<template>
	<div>
		<el-form
			ref="form"
			:inline="true"
			:model="queryData"
			class="flex-warp-container"
		>
			<template v-if="tabSign === '0'">
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="timeFlag"
						:placeholder="$t('common.please_choose')"
						style="width:150px"
					>
						<el-option
							:label="
								$t(
									'funds.proxy_member_funds_record.arrive_time'
								)
							"
							value="0"
						></el-option>
						<el-option
							:label="$t('funds.apply_time')"
							value="1"
						></el-option>
					</el-select>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.deposit_account')}:`"
					class="flex-row-container"
				>
					<el-input
						v-model="queryData.userName"
						class="input-with-select"
						:placeholder="$t('common.please_enter')"
						clearable
						size="medium"
						v-input="{ name: 'noEmpty' }"
						style="width:200px"
					></el-input>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-select
						v-model="queryData.inputType2"
						:placeholder="$t('common.please_choose')"
						style="width:130px"
					>
						<el-option :label="'总代账号'" :value="0"></el-option>
						<el-option :label="'上级代理'" :value="1" />
						<el-option :label="'所属代理'" :value="2" />
					</el-select>
					<el-input
						v-model="queryData.inputValue2"
						class="input-with-select"
						:placeholder="$t('common.please_enter')"
						clearable
						size="medium"
						v-input="{ name: 'noEmpty' }"
						style="width:200px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.order_no')}:`"
					class="flex-row-container"
					label-width="61px"
				>
					<el-input
						v-model="queryData.eventId"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						v-input="{ name: 'num_alp' }"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.proxy_member_funds_record.app_type')}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.appType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in loginDeviceTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.proxy_member_funds_record.order_status')}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.orderStatus"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in depositClientStatus"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.proxy_member_funds_record.client_state')}:`
					"
					class="flex-row-container"
					label-width="91px"
				>
					<el-select
						v-model="queryData.clientStatus"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in depositOrderStatus"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.payment_merchant_name'
						)}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.payMerchantName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.pay_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.payType"
						:popper-append-to-body="false"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="item in payTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.channel_name')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.channelName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.currency')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.currency"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in currencyType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.number_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.userType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							:label="$t('agent.agent')"
							:value="1"
						></el-option>
						<el-option
							:label="$t('common.member')"
							:value="0"
						></el-option>
					</el-select>
				</el-form-item>
			</template>
			<template v-if="tabSign === '1'">
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="timeFlag"
						:placeholder="$t('common.please_choose')"
						style="width:150px"
					>
						<el-option :label="'出款时间'" value="0"></el-option>
						<el-option
							:label="$t('funds.apply_time')"
							value="1"
						></el-option>
					</el-select>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.withdrawal_account')}:`"
					class="flex-row-container"
				>
					<el-input
						v-model="queryData.userName"
						class="input-with-select"
						:placeholder="$t('common.please_enter')"
						clearable
						size="medium"
						v-input="{ name: 'noEmpty' }"
						style="width:200px"
					></el-input>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-select
						v-model="queryData.inputType2"
						:placeholder="$t('common.please_choose')"
						style="width:130px"
					>
						<el-option :label="'总代账号'" :value="0"></el-option>
						<el-option :label="'上级代理'" :value="1" />
						<el-option :label="'所属代理'" :value="2" />
					</el-select>
					<el-input
						v-model="queryData.inputValue2"
						class="input-with-select"
						:placeholder="$t('common.please_enter')"
						clearable
						size="medium"
						v-input="{ name: 'noEmpty' }"
						style="width:200px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('common.withdraw_money_wallet')}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.walletType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
						style="width: 220px;"
					>
						<el-option
							:label="$t('common.cash_wallet')"
							value="17"
						></el-option>
						<el-option
							:label="$t('common.earnings_wallet')"
							value="21"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.order_no')}:`"
					class="flex-row-container"
					label-width="61px"
				>
					<el-input
						v-model="queryData.eventId"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						v-input="{ name: 'num_alp' }"
					></el-input>
				</el-form-item>

				<el-form-item
					:label="
						`${$t('funds.proxy_member_funds_record.app_type')}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.appType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in loginDeviceTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.proxy_member_funds_record.order_status')}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.orderStatus"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in withdrawOrderStatus"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.proxy_member_funds_record.client_state')}:`
					"
					class="flex-row-container"
					label-width="91px"
				>
					<el-select
						v-model="queryData.clientStatus"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in withdrawClientStatus"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.payment_merchant_name'
						)}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.payMerchantName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
				<!-- <el-form-item :label="`${$t('funds.pay_type')}:`">
					<el-select
						v-model="queryData.payType"
						:popper-append-to-body="false"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="item in payTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					:label="`${$t('funds.pay_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.withdrawType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							:label="
								$t('funds.proxy_member_funds_record.brank_card')
							"
							value="1"
						></el-option>
						<el-option
							:label="
								$t(
									'funds.proxy_member_funds_record.virtual_currency'
								)
							"
							value="2"
						></el-option>
						<el-option
							:label="$t('common.bmh_name')"
							value="8"
						></el-option>
						<el-option
							:label="
								$t(
									'common.yh_name'
								)
							"
							value="9"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.channel_name')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.channelName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.proxy_member_funds_record.first_sithdraw_status'
						)}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.firstWithdrawStatus"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							:label="$t('common.yes')"
							value="1"
						></el-option>
						<el-option
							:label="$t('common.no')"
							value="0"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.proxy_member_funds_record.is_big_withdraw_amount'
						)}:`
					"
					class="flex-row-container"
					label-width="105px"
				>
					<el-select
						v-model="queryData.bigWithdraw"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							:label="$t('common.yes')"
							value="1"
						></el-option>
						<el-option
							:label="$t('common.no')"
							value="0"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.currency')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.currency"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in currencyType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.number_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.userType"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							:label="$t('agent.agent')"
							:value="1"
						></el-option>
						<el-option
							:label="$t('common.member')"
							:value="0"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item :label="`${$t('funds.vip_level')}:`">
						<el-input-number
							v-model="queryData.vipLevelMin"
							size="medium"
							:placeholder="$t('common.minimum')"
							:min="0"
							:max="10"
							:controls="false"
							style="width:100px"
							name="vipLevelMin"
							@blur="
								handleAmount(
									queryData,
									1,
									'vipLevelMin',
									'vipLevelMax',
									$t(
										'funds.proxy_member_funds_record.form_search_tip1'
									)
								)
							"
						/>
						-
						<el-input-number
							v-model="queryData.vipLevelMax"
							size="medium"
							:placeholder="$t('common.maximum')"
							:min="0"
							:max="10"
							:controls="false"
							style="width:100px"
							name="vipLevelMax"
							@blur="
								handleAmount(
									queryData,
									2,
									'vipLevelMin',
									'vipLevelMax',
									$t(
										'funds.proxy_member_funds_record.form_search_tip2'
									)
								)
							"
						/>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.withdrawal_ip'
							)}:`
						"
					>
						<el-input
							v-model="queryData.ip"
							clearable
							size="medium"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.withdrawal_terminal_numbe'
							)}:`
						"
					>
						<el-input
							v-model="queryData.deviceNo"
							clearable
							size="medium"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item> -->
			</template>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="medium"
					:disabled="searchLoading"
					:loading="searchLoading"
					@click="handleSearch"
				>
					{{ $t('common.search') }}
				</el-button>
				<el-button
					icon="el-icon-refresh-left"
					size="medium"
					:disabled="searchLoading"
					@click="handleReset"
				>
					{{ $t('common.reset') }}
				</el-button>
				<el-button
					v-if="hasPermission('90690046')"
					type="warning"
					icon="el-icon-download"
					size="medium"
					:disabled="searchLoading"
					:loading="exportLoading"
					@click="handleExport"
				>
					{{ $t('common.export') }}
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { searchCommissionPayoutStatus } from '@/dict/funds'
const end = () => {
	return dayjs().endOf('day')
}
const start = () => {
	return dayjs().startOf('day')
}
export default {
	mixins: [list],
	props: {
		searchLoading: {
			type: Boolean,
			default: false
		},
		exportLoading: {
			type: Boolean,
			default: false
		},
		tabSign: {
			type: String,
			default: '0'
		},
		defaultCycleTime: {
			type: Array,
			default: () => {}
		},
		defaultPayoutTime: {
			type: Array,
			default: () => {}
		}
	},
	data() {
		return {
			searchCycleTime: this.defaultCycleTime,
			searchPayoutTime: this.defaultPayoutTime,
			searchTime: [start(), end()],
			timeFlag: '0',
			queryData: {
				inputType2: 0
			},
			// 非总代搜索客户端状态
			searchCommissionPayoutStatus
		}
	},
	computed: {
		payTypeList() {
			return this.globalDics.depositMemberPaymentType || []
		},
		withdrawOrderStatus() {
			return this.globalDics.withdrawOrderStatus || []
		},
		withdrawClientStatus() {
			return this.globalDics.withdrawClientStatus || []
		},
		depositOrderStatus() {
			return this.globalDics.depositOrderStatus || []
		},
		loginDeviceTypeList() {
			return this.globalDics.login_device_type1 || []
		},
		depositClientStatus() {
			return this.globalDics.depositClientStatus || []
		},
		currencyType() {
			return this.globalDics.currencyType || []
		}
	},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		handleSearch() {
			this.queryData.searchCycleTime = this.searchTime
			this.queryData.timeFlag = this.timeFlag
			console.log(this.queryData, 'xxx')
			this.$emit('handleSearch', this.queryData)
		},
		handleReset() {
			this.queryData = {
				inputType2: 0
			}
			this.searchTime = [start(), end()]
			this.searchCycleTime = this.defaultCycleTime
			this.$emit('handleReset')
		},
		handleExport() {
			this.$emit('handleExport', this.queryData)
		},
		openColSettings() {
			this.$emit('openColSettings')
		}
	}
}
</script>
